<template>
    <div class="person">
    <h2>需求当水温到60℃或者水位到80cm像后端发起请求</h2>
    <h1>当前水温temp:{{ temp }}℃</h1>
    <h1>当前水位height:{{ height }}cm</h1>

    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+20</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import {ref, watch,watchEffect} from 'vue'
    let temp=ref(10)
    let height=ref(15)
    function changeTemp(){
        temp.value+=10
    }
    function changeHeight(){
        height.value+=20
    }
    //watch实现监视
    // watch([temp,height],(value)=>{
    //     let [newTemp,newHeight] = value
    //     console.log(newTemp,newHeight)
    //     if(newTemp>=60||newHeight>=80){
    //         console.log("像后端发起请求")
    //     }
    // })

    //watchEffect实现监视
    watchEffect(()=>{
        if(temp.value>=60||height.value>=80){
            console.log("像后端发起请求")
        }
    })
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>